❏ 圖片格式的介紹 ❏

設計網頁時，插入圖片或影像，可以增加網頁生動度。

簡單介紹普遍常用的三種格式：

• GIF：
  • 影像會有一定程度的失真。
  • 不適合用來儲存檔案顏色較多的照片。
  • 適合用在線條分明的圖片，如：按鈕等。
  • 可構成簡單的動畫。
  • 副檔名：.gif
• JPEG:
  • 比較適合儲存照片圖檔。
  • 壓縮成 JPEG 檔時可以大幅降低檔案大小。
  • 副檔名為：.jpg
• PNG:
  • 壓縮影像不失真。
  • 檔案相對比較大。
  • 有背景透明的特性。
  • 副檔名：.jpg

❏ 圖片標籤 ❏

如果要在網頁顯示圖片，必須要使用<ing>標籤。

<img src="圖片路徑"
     width="寬度"
     height="高度">

接下來稍微介紹以上標籤的屬性：
src ：設定圖檔路徑。
width hight：設定圖片的寬度和高度，預設單位為像素（pixels)

❏ 音效標籤 ❏

<audio>
    <source="src=檔案路徑"
     type="audio/mp3">
<audio/>

介紹以上標籤的屬性：
src ：設定影片路徑。
type：檔案的格式，定義聲音，比如音樂或其他音頻。

❏ 影片標籤 ❏

使用 html5 的 video 標籤來播放既有的影片。
目前FireFox、Chrome、Safari 都可以支援影片。

<video src="影片連結" controls></video>

若你還想設定影片在頁面的比例，也可以寫成：

<video id="media" 
    src="圖片路徑" controls 
    width="400px" 
    heigt="400px">
</video>  

這些標籤也離不開 SEO，特別是圖片的優化，可以說是 SEO 的基礎之一。
若未來要走網路行銷的行列，這些更需要了解。

例如假設今天搜尋引擎在搜圖時，可是並沒有理解你的圖片內容，所以我們會加上圖片說明，讓搜尋引擎更好找到你這個網站內的搜尋者需要的圖片。

那你可怎麼寫呢？

<img src ="image.jpg"
     alt ="這是一隻哥吉拉">

假設今天圖片失效，維護者也可以從 alt的屬性中，了解原先要配置的圖片。

Google 也會對alt來判斷這張照片資訊，同時也可以讓無法看到圖片的使用者來理解圖片，所以 alt 盡量已簡短好理解的關鍵字來寫，留下正確的圖片資訊也是 SEO 優化很重要的要素。